<template>
    <div class="route-main">
        <div class="bg" v-if="open" @click="close"></div>
        <el-row>
            <el-col>
                <div class="tabs" v-show="tabShow">
                    <el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <!-- <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item> -->
                                <el-menu-item :index="'1-' + (index + 1)" v-for="(item, index) in list" :key="item.path" @click="() => replace(item.path)">
                                    {{ '1-' + (index + 1) }} <span class="hidden-sm-and-down">{{ item.meta.title }}</span>
                                </el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航四</span>
                            </template>
                            <el-menu-item index="4-3">选项3</el-menu-item>
                            <el-submenu index="4-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="4-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-col>
            <el-col>
                <div class="btn">
                    <div class="header">
                        <el-tag @click="mdOpen">展开{{ $store.state.dev }}</el-tag>
                    </div>
                    <div class="btn-list">
                        <el-tag @click="study">学习1</el-tag>
                        <el-tag @click="index">拖拽首页</el-tag>
                        <el-tag @click="form">拖拽表单</el-tag>
                        <el-tag @click="create">element表单创建器</el-tag>
                        <el-tag @click="but">点击</el-tag>
                        <el-tag @click="pdf">展示pdf</el-tag>
                        <el-tag @click="mavonEditor">富文本编辑器</el-tag>
                        <el-tag @click="vjsoneditor">json代码器</el-tag>
                        <el-tag @click="myselfForm">自己表单</el-tag>
                        <el-tag @click="animateIndex">动画</el-tag>
                        <el-tag @click="mapIndex">echarts地图</el-tag>
                        <el-tag @click="world">世界地图</el-tag>
                        <el-tag @click="copy">复制</el-tag>
                        <el-tag @click="yzm">验证码</el-tag>
                        <el-tag @click="upload">上传</el-tag>
                    </div>
                    <div class="box">
                        <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
                            <keep-alive include="index">
                                <router-view v-slot="{ Component }">
                                    <!-- <transition name="fade" mode="out-in"> -->
                                    <component :is="Component" />
                                    <!-- </transition> -->
                                </router-view>
                            </keep-alive>
                        </v-touch>
                    </div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span class="iconjr-icon-up">内容部分</span>
                            <span @click="exit">退出</span>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <!-- <div id="ctx">
      <h3>hello liu-cli</h3>
      <el-tag>潘昱</el-tag>
      <el-tag @click="to">liu</el-tag>
      <p>时间不会辜负努力的人</p>
    </div> -->
    </div>
</template>

<script>
export default {
    methods: {
        to: function() {
            this.$router.push({
                path: '/liu'
            });
        },
        // xsOpen: function () {
        //   this.xs = !this.xs
        // },
        mdOpen: function() {
            let tabs = document.getElementsByClassName('tabs')[0];
            if (document.documentElement.clientWidth <= 757) {
                this.open = true;
                tabs.style.zIndex = 101;
                this.tabShow = true;
            }
            if (document.documentElement.clientWidth > 757) {
                this.tabShow = !this.tabShow;
                if (this.tabShow) {
                    let btn = document.getElementsByClassName('btn')[0];
                    btn.style.marginLeft = 210 + 'px';
                } else {
                    let btn = document.getElementsByClassName('btn')[0];
                    btn.style.marginLeft = 0 + 'px';
                }
            }
        },
        close() {
            this.open = false;
            if (document.documentElement.clientWidth <= 757) {
                this.tabShow = false;
                // let btn = document.getElementsByClassName("btn")[0]
                // btn.style.marginLeft = 0 + "px"
            }
        },
        onSwipeLeft() {
            console.log(123);
            this.$nextTick(() => {
                let index = this.list.findIndex((res) => {
                    return res.path === this.$route.path;
                });
                if (index + 1 === this.list.length) {
                    index = 0;
                    this.$router.push({ path: this.list[index].path });
                } else {
                    this.$router.push({ path: this.list[index + 1].path });
                }
            });
        },
        onSwipeRight() {
            this.$nextTick(() => {
                let index = this.list.findIndex((res) => {
                    return res.path === this.$route.path;
                });
                if (index - 1 === -1) {
                    index = this.list.length - 1;
                    this.$router.push({ path: this.list[index].path });
                } else {
                    this.$router.push({ path: this.list[index - 1].path });
                }
            });
        },
        exit: function() {
            sessionStorage.removeItem('token');
            this.$router.replace({ path: '/' });
        },
        index: function() {
            this.$router.push({
                path: '/draggable'
            });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        replace(path) {
            // let tabs = document.getElementsByClassName("tabs")[0]\
            sessionStorage.setItem('history', path);
            this.open = false;
            if (document.documentElement.clientWidth <= 757) {
                this.tabShow = false;
                // let btn = document.getElementsByClassName("btn")[0]
                // btn.style.marginLeft = 0 + "px"
            }
            // tabs.style.zIndex = 97
            if (path === this.$route.path) {
                this.$message.success('已在当前页面');
                return false;
            } else {
                this.$router.replace({ path: path });
            }
        },
        upload: function() {
            this.$router.push({
                path: '/upload'
            });
        },
        copy: function() {
            this.$router.push({
                path: '/copy'
            });
        },
        yzm: function() {
            this.$router.push({
                path: '/yzm'
            });
        },
        study: function() {
            this.$router.push({
                path: '/study'
            });
        },
        world: function() {
            this.$router.push({
                path: '/world'
            });
        },
        myselfForm: function() {
            this.$router.push({
                path: '/myselfForm'
            });
        },
        mapIndex: function() {
            this.$router.push({
                path: '/map'
            });
        },
        vjsoneditor: function() {
            this.$router.push({
                path: '/vjsoneditorIndex'
            });
        },
        animateIndex: function() {
            this.$router.push({
                path: '/animateIndex'
            });
        },
        mavonEditor: function() {
            this.$router.push({
                path: '/mavonEditorIndex'
            });
        },
        pdf: function() {
            this.$router.push({
                path: '/pdf'
            });
        },
        form: function() {
            this.$router.push({
                path: '/daggableList'
            });
        },
        create: function() {
            this.$router.push({
                path: '/formCreate'
            });
        },
        but: function() {
            // this.$http('get','http://localhost:8000/list',{}).then(res=>{
            //   console.log(res)
            // })
            this.$http('get', 'http://localhost:8000/list', {}).then((res) => {
                console.log(res);
                this.$message.success('成功');
            });
            this.$http('get', 'http://localhost:8000/list', {}).then((res) => {
                console.log(res);
                this.$message.success('成功');
            });
            console.log(this.$http);
        }
    },
    data() {
        return {
            active: '',
            time: null,
            xs: true,
            open: false,
            tabShow: false,
            tree: [{}],
            list: this.$router.options.routes[2].children,
            add: 0,
            reduce: 0
        };
    },
    created() {
        let self = this;
        this.time = setTimeout(function() {
            self.$message.error('token过期');
            sessionStorage.removeItem('token');
            self.$router.replace({ path: '/' });
        }, 1800000);
    },
    mounted() {
        if (document.documentElement.clientWidth <= 757) {
            this.tabShow = false;
            let btn = document.getElementsByClassName('btn')[0];
            btn.style.marginLeft = 0 + 'px';
        }
        if (document.documentElement.clientWidth > 757) {
            this.tabShow = true;
            let btn = document.getElementsByClassName('btn')[0];
            btn.style.marginLeft = 210 + 'px';
        }
        let self = this;
        window.onresize = function() {
            if (document.documentElement.clientWidth <= 757) {
                self.tabShow = false;
                let btn = document.getElementsByClassName('btn')[0];
                btn.style.marginLeft = 0 + 'px';
            }
            if (document.documentElement.clientWidth > 757) {
                self.tabShow = true;
                let btn = document.getElementsByClassName('btn')[0];
                btn.style.marginLeft = 210 + 'px';
            }
        };
        // 路由的信息 在第一次刷新页面的时候 拿到的是之前的
        // 只有清空一次队列 获取下一次最新的 才能拿到最新的信息
        this.$nextTick(() => {
            let index = this.list.findIndex((res) => {
                return res.path === this.$route.path;
            });
            this.active = '1-' + (index + 1);
            // this.active = this.$route.path
        });
    },
    destroyed() {
        window.onresize = null;
        clearTimeout(this.time);
    }
};
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

// less scoped
// sass scoped
// less 或者sass
// 三种选择 scoped 是需要导入包 不受其他样式影响 但是存在 seo
// 不建议使用scoped
// 采用class 命名嵌套
// @import url('/static/css/app.less');
.route-main {
    // display: flex;
    // min-height: 800px;
    overflow: auto;
    position: fixed;
    height: 100%;
    width: 100%;
    .btn-list {
        box-sizing: border-box;
        padding: 25px;
    }
    .tabs {
        box-sizing: border-box;
        //  min-width: 15%;
        //  min-height: 700px;
        position: fixed;
        width: 210px;
        height: 100%;
        z-index: 97;
        .el-menu {
            border: 0px;
            .el-menu-item {
                a {
                    color: var(--color);
                }
            }
            .el-submenu .el-menu-item {
                height: 50px;
                line-height: 50px;
                padding: 0 45px;
                min-width: 0px;
            }
        }
        background-color: rgb(84, 92, 100);
    }
    .btn {
        //  display: flex;
        //  flex-direction: column;

        .box-card {
            margin: 25px;
        }
        .el-card {
            .el-card__body {
                // height: 500px;
                // min-height: 300px;
                // min-width: 970px;
                overflow: hidden;
                &:hover {
                    overflow: auto;
                }
            }
        }
    }
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #ebf2f3;
        opacity: 0.5;
        z-index: 99;
    }
    .box {
        box-sizing: border-box;
        padding: 5px;
    }
}

// @keyframes rorate {
//   0% {
//     transform: scale(0.1);
//     opacity: 0.1;
//   }
//   100% {
//     transform: scale(1);
//     opacity: 1;
//   }
// }
// @-o-keyframes  rorate {
//   0% {
//     transform: scale(0.1,0.1);
//   }
//   100% {
//     transform: scale(1,1);
//   }
// }
// @-moz-keyframes  rorate {
//   0% {
//     transform: scale(0.1,0.1);
//   }
//   100% {
//     transform: scale(1,1);
//   }
// }
// @-webkit-keyframes rorate {
//   0% {
//     transform: scale(0.1,0.1);
//   }
//   100% {
//     transform: scale(1,1);
//   }
// }
// #app {
//   position: absolute;
//   width: 300px;
//   height: 300px;
//   top: 0;
//   bottom: 0px;
//   left: 0px;
//   right: 0;
//   margin: auto;
//   animation: rorate 5s;
//   // background-repeat: no-repeat;
//   // background-image: url("/static/meimei.jpg");
//   #ctx {
//     position: absolute;
//     width: 120px;
//     height: 100px;
//     top: 0;
//     bottom: 0px;
//     left: 0px;
//     right: 0;
//     margin: auto;
//     .el-tag {
//       &:hover {
//         cursor: pointer;
//       }
//     }
//     p {
//       color: red;
//     }
//   }
// }
</style>
